<script lang="ts">
  import { onMount } from "svelte";
  import Swiper from "swiper";
  import SwiperCore, {
    Autoplay,
    Pagination,
    Navigation,
    Mousewheel
  } from "swiper"; /* importing swiper/core throws error in build */

  import "swiper/swiper.min.css";
  import "swiper/components/pagination/pagination.min.css";
  import "swiper/components/navigation/navigation.min.css";
  let container, swiper, pagination;
  onMount(() => {
    SwiperCore.use([Autoplay, Pagination, Navigation, Mousewheel]);
    swiper = new Swiper(container, {
      direction: "vertical",
    	speed: 900,
      slidesPerView: 1,
      loop: true,
      mousewheel: true,
			pagination: {
				el: pagination,
				clickable: true,
        renderBullet: function (index, className) {
          let str = ''
          switch(index){
            case 0:
              str = 'TTK'
              break;
            case 1:
              str = 'EDU'
              break;
            case 2:
              str = 'MES'
              break;
            default: 
              str = ''
          }
					return '<span class="' + className + '">' 
            + str + 
            "</span>";
				},
			}
    })
  })
  const items = [
    {
      name: "Leonardo",
      age: 26,
      location: "Italy",
			img: 'https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/0-390b5def140dc370854c98b8e82ad394.png',
    },
    {
      name: "Maria",
      age: 27,
      location: "Brazil",
			img: 'https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/1-b4afd269ffb0ba19bd1dd33e3ed5cec3.png'
    },
    {
      name: "Oliver",
      age: 28,
      location: "United States",
			img: 'https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/0-390b5def140dc370854c98b8e82ad394.png'
    },
  ];
</script>

<svelte:head>
	<title>产品-字节跳动</title>
</svelte:head>

<section>
  <div class="shadow-xl product-slide">
		<div class="swiper-container product-slide-warp" bind:this={container}>
		 	<div class="swiper-wrapper">
			 	{#each items as item}
				 	<div class="swiper-slide">
						<!-- <strong>{item.name}</strong> ({item.age})
						from {item.location} -->
						<img src="{item.img}" alt="{item.name}" class="swiper-slide__img">
				 	</div>
			 	{/each}
		 	</div>
			<div class="swiper-pagination product-swiper-slide__page" bind:this={pagination}></div>
			<!-- <div class="swiper-button-next" bind:this={next}></div>
			<div class="swiper-button-prev" bind:this={prev}></div> -->
	 	</div>
	</div>
</section>



<style lang="scss">
.product-slide {
  position: relative;
  width: 100%;
  height: calc(100vh - 1.8rem);
  min-width: 10.24rem;
  min-height: 6rem;
  margin-top: 1.8rem;
  &-warp {
    height: 100%;
    width: 100%;
    transition: all .3s;
  }
  .swiper-slide {
		background: #fff;
		&__img {
			display: block;
			height: 100%;
			width: 100%;
		}
	}
}
</style>